<template>
  <div class="content">
    <div class="title">入库审核</div>
    <div class="head">
      <div class="head-search">
        <span class="search-tip">品号:</span>
        <el-input v-model="materialCode" size="mini" clearable placeholder="请输入物料编号"></el-input>
        <icon-svg name="sweep" width="25px" height="25px" color="" style="cursor:pointer;margin-left:1vw;" @click.native="sweep_btn"></icon-svg>
      </div>
      <div class="head-btns">
        <el-button type="primary" size="mini" @click="search_btn">搜索</el-button>
        <el-button type="info" size="mini" @click="reset_btn">重置</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main-btns"></div>
      <div class="main-table">
        <el-table :data="tableData" :border="false" v-loading="loadingState" style="width: 100%" height="96%">
          <el-table-column prop="warehouseName" label="仓库名称" width="120"></el-table-column>
          <el-table-column prop="workshop" label="车间" width="80"></el-table-column>
          <el-table-column prop="applyPerson" label="生效人" width=""></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column prop="inOrOutTypeName" label="入库类型" width=""></el-table-column>
          <el-table-column prop="orderNumber" label="入库单号" width="180"></el-table-column>
          <el-table-column prop="relateTypeName" label="关联单据类型" width="110"></el-table-column>
          <el-table-column prop="relateOrders" label="关联单号" width="150"></el-table-column>
          <el-table-column prop="materialFields.code" label="物料编码" width="120"></el-table-column>
          <el-table-column prop="materialFields.name" label="物料名称" width="120"></el-table-column>
          <el-table-column prop="planAmount" label="计划数量" width=""></el-table-column>
          <el-table-column prop="actualAmount" label="实际数量" width=""></el-table-column>
          <el-table-column prop="stateName" label="状态" width=""></el-table-column>
          <el-table-column prop="approvalStatusName" label="审批状态" width=""></el-table-column>
          <el-table-column prop="" label="操作" fixed="right" width="170">
            <template slot-scope="{ row, $index}">
              <el-button type="text" @click="reject_btn(row)" size="small">驳回</el-button>
              <el-button @click="edit(row)" type="text" size="small" v-show="false">编辑</el-button>
              <el-button type="text" @click="examine_btn(row)">查看</el-button>
              <el-button type="text" @click="check_btn(row)">入库</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background layout="prev, pager, next, total, sizes, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { reqStockInList, reqStockInListByMaterialCode, reqUpdateStockIn, reqUpdateInStockCheck } from "@/api/workOrder.js";
import { portrait, autoOrientation, fullscreen } from '@/utils/rotatingScreen.js';
import { qrCode } from '@/utils/jingzhi.js'
export default {
  data() {
    return {
      materialCode:"",  //物料编码 614095
      currentPage:1,
      pageSize:10,
      total:0,
      tableData: [],
      loadingState:false,
      dialogVisible: false,
      dialogForm: {
        createTime:"",
        remarks:"",
        warehouseName:"",
        applyPerson:"",
        inOrOutTypeName:"",
        orderNumber:"",
        relateOrders:"",
        materialName:"",
        materialCode:"",
        planAmount:"",
        actualAmount:"",
        stateName:"",
        approvalStatusName:""
      }
    }
  },
  mounted() {
    this.getStockInList();
    const isDevelopment = process.env.NODE_ENV === 'development';
    if(!isDevelopment){
      autoOrientation();
    }
  },
  methods: {
    //搜索和重置
    search_btn(){
      let code = this.materialCode;
      if(code.trim() === "") {
        this.$message({type:"warning",message:"请输入物料编码后查询"});
        return;
      }
      this.getStockInListByMaterialCode();
    },
    reset_btn(){
      this.materialCode = "";
      this.currentPage = 1;
      this.pageSize = 10;
      this.getStockInList();
    },
    //点击扫码
    async sweep_btn() {
      try {
        let res = await qrCode();
        this.materialCode = res;
        this.search_btn();
        console.log('调用精致提供的扫码api', res);
      } catch (error) {
        this.$message({ type: 'warning', message: error });
      }
    },
    //分页查询生产入库单
    getStockInList() {
      let page = this.currentPage;
      let size = this.pageSize;
      this.loadingState = true;
      reqStockInList(page, size).then(res => {
        if(res.data.code === 200){
          const tmp = res.data.data.content;
          this.tableData = tmp.map(v => {
            const workshop = v.remarks.includes("EPC") ? '装配车间' : v.remarks.split(' ')[0];
            console.log(v.remarks,workshop)
            return{
              workshop,
              ...v
            }
          });
          this.total = res.data.data.totalElements;
        }
        console.log('分页获取生产入库单',res);
        this.loadingState = false;
      }).catch(err => {
        this.$message({type:"error",message:"生产入库单获取失败:"});
        this.loadingState = false;
      })
    },
    getStockInListByMaterialCode(){
      let page = this.currentPage;
      let size = this.pageSize;
      let code = this.materialCode;
      if(code.trim() === "") {
        return;
      }
      this.loadingState = true;
      reqStockInListByMaterialCode(page, size, code).then(res => {
        if(res.data.code === 200){
          const tmp = res.data.data.content;
          this.tableData = tmp.map(v => {
            const workshop = v.remarks.includes("EPC") ? '装配车间' : v.remarks.split(' ')[0];
            return {
              ...v,
              workshop
            }
          })
          this.total = res.data.data.totalElements;
        }
        this.loadingState = false;
        console.log('分页查询生产入库单',res);
      }).catch(err => {
        this.$message({type:"error",message:"生产入库单查询失败，请重试"});
        this.loadingState = false;
      })
    },
    //编辑功能
    edit(row){
        this.$router.push({name: "workorder4Detail",params:{row:row,type:'edit'}});
      },
    //查看功能
    examine_btn(row) {
      this.$router.push({name: "workorder4Detail",params:{row:row,type:'detail'}});
    },
    //入库功能
    check_btn(row) {
      this.$confirm('即将入库, 是否继续?', '提示', { confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'})
        .then(() => {
          //执行入库
          reqUpdateStockIn(row.id).then(response => {
            //入库成功
            if(response.data.code === 200){
              this.$message({type:"success",message:"入库成功"});
              //重新请求列表数据
              this.getStockInList();
            }
          }).catch(error => {
            //审核入库失败
            this.$message({type:"error",message:error.response.data.message});
            console.log(error.response);
          })
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消'});          
      });
    },
    reject_btn(row){
      const parameter = row;
      parameter.ext.fieldOne = 1;
      this.$confirm('是否驳回此入库单?', '提示', { confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(confirm => {
        reqUpdateInStockCheck(parameter).then(response => {
          if(response.data.code === 200){
            this.$notify.success({title: '提示',message: '驳回成功'});
            this.getStockInList();
          }
        })
      })
    },
    //pagination
    handleCurrentChange(page){
      this.currentPage = page;
      this.getStockInList();
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.getStockInList();
    }
  }
}
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .title {
    flex: 0.5;
    display: flex;
    padding: 0 2%;
    align-items: center;
    background: #4095e5;
    color: #fff;
    box-sizing: border-box;
  }
  .head {
    flex: 0.8;
    padding: 0 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .head-search {
      display: flex;
      align-items: center;
      width: 40%;
      .search-tip {
        width: 50px;
        font-size: 14px;
      }
    }
    @media screen and (min-width: 300px) and (max-width: 600px) {
      .head-search {
        width: 55%;
      }
    }
  }
  .main {
    flex: 5;
    display: flex;
    flex-direction: column;
    padding: 1% 2%;
    box-sizing: border-box;
    .main-btns{
      // flex: 0.5;
      display: flex;
    }
    .main-table{
      flex: 4;
    }
    .main-pagination{
      flex: 0.5;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.el-form-item{
    margin-bottom: 2px;
    .el-input{
      width: 70%;
    }
}
</style>